"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { useTheme } from "next-themes";
import { Moon, Sun, Github } from "lucide-react";

export function Header() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 border-b border-gray-200/20 dark:border-gray-800/20 bg-white/60 dark:bg-gray-950/60 backdrop-blur-md transition-all duration-300 hover:bg-white/80 dark:hover:bg-gray-950/80 shadow-sm hover:shadow-md">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <a href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent transition-all duration-300 hover:scale-105">
              olllo
            </a>
          </div>
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => window.open('https://github.com/yourusername/jank', '_blank')}
              aria-label="GitHub repository"
              className="transition-all duration-300 hover:scale-105"
            >
              <Github className="h-5 w-5 text-gray-700 dark:text-gray-300" />
            </Button>
            {mounted && (
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                aria-label="Toggle theme"
                className="transition-all duration-300 hover:scale-105"
              >
                {theme === 'dark' ? (
                  <Sun className="h-5 w-5 text-gray-700 dark:text-gray-300 transition-transform duration-300" />
                ) : (
                  <Moon className="h-5 w-5 text-gray-700 dark:text-gray-300 transition-transform duration-300" />
                )}
              </Button>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}